<template>
  <div class="car">
    <!-- 选框 -->
    <!-- 购物车页面商品卡片 -->
    <van-checkbox-group v-model="result">
      <van-checkbox
        :name="item"
        v-for="item in cartList"
        :key="item.id"
        @click.self="singleCheckfn"
      >
        <!-- <van-card
          :num="item.number"
          :price="item.retail_price"
          desc="描述信息"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        /> -->
        <van-card
          :num="item.number"
          :price="item.retail_price"
          desc="描述信息"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        >
          <template #footer>
            <van-button size="mini" @click.stop="del(item.product_id)"
              >删除</van-button
            >
          </template>
        </van-card>
      </van-checkbox>
    </van-checkbox-group>

    <!-- 提交订单 -->
    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @click="checkall">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>
<script>
//引入购物车接口
import { getcardata, cartdelete } from "@/utils/https";
export default {
  name: "Car",
  data() {
    return {
      result: [], //选中的商品
      cartList: [], //购物车数组
      checked: false, //全选状态
      productIds: "", //
    };
  },
  components: {},
  computed: {
    totalPrice() {
      // 计算总价
      let sum = 0;
      this.result.forEach((item) => {
        sum += item.retail_price * item.number * 100;
      });
      return sum;
    },
  },
  methods: {
    del(id) {
      // 删除事件
      this.productIds = id;
      console.log(this.productIds.toFixed());

      this.$dialog
        .confirm({
          title: "提示",
          message: "确定要删除吗?",
        })
        .then(() => {
          cartdelete({
            // 参数
            productIds: this.productIds.toFixed(),
          }).then((res) => {
            // 调用gatdata
            this.gatdata();
          });
        })
        .catch(() => {
          //点击取消
        });
    },
    onSubmit() {
      // 提交事件
    },
    onClickEditAddress() {
      // 修改地址
    },
    checkall() {
      // 全选事件
      if (this.checked) {
        this.result = this.cartList;
      } else {
        this.result = [];
      }
    },
    singleCheckfn() {
      // 单选
      if (
        this.result.length == this.cartList.length &&
        this.cartList.length != 0
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    // 用一个方法包含getcardata
    gatdata() {
      getcardata().then((res) => {
        console.log(res);
        this.cartList = res.data.data.cartList;
      });
    },
  },
  created() {
    // 调用gatdata
    this.gatdata();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.car {
  padding-left: 10px;
  /deep/.van-checkbox__label {
    flex: 1;
  }
  /deep/.van-submit-bar {
    bottom: 45px;
  }
  a {
    div {
      float: left;
    }
  }
}
</style>
